<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        .container {
            margin:0 auto;
            margin-top: 70px;
            text-align: center;
            width: 300px;
        }
        .subTitle {
            color:gray;
            font-size: 14px;
        }
        .title {
            font-size: 45px;
        }
        .input {
            width: 90%;
        }
        .inputContainer {
            text-align: left;
            margin-bottom: 20px;
        }
        .subContainer {
            text-align: left;
        }
        .field {
            font-size: 14px;
        }
        .input {
            border-radius: 6px;
            height: 25px;
            margin-top: 10px;
            border-color: silver;
            border-style: solid;
            background-color: cornsilk;
        }
        .tip {
            margin-top: 5px;
            font-size: 12px;
            color: gray;
        }
        .setting {
            font-size: 9px;
            color: black;
        }
        .label {
            font-size: 12px;
            margin-left: 5px;
            height: 20px;
            vertical-align:middle;
        }
        .checkbox {
            height: 20px;
            vertical-align:middle;
        }
        .btn {
            border-radius: 10px;
            height: 40px;
            width: 300px;
            margin-top: 30px;
            background-color: deepskyblue;
            border-color: blue;
            color: white;
        }
    </style>
    <script src="../vue3.js"></script>
</head>
<body>
    <div class="container" id="application">
        <div class="container">
            <div class="subTitle">加入我们，一起创造美好的明天</div>
            <h1 class="title">创建你的账号</h1>
            <div v-for="(item, index) in fields" class="inputContainer">
                <div class="field">{{item.title}}<span style="color: red" v-if="item.required">*</span></div>
                <input v-model.trim="item.model" class="input" v-bind:type="item.type">
                <div v-if="index === fieldsLength - 1 || item.title === '密码'" class="tip">请确认密码长度需要大于6</div>
<!--                <div v-if="item.title === '密码'" class="tip">请确认密码长度需要大于6</div>-->
            </div>
            <div class="subContainer">
                <div class="setting">偏好设置</div>
                <input class="checkbox" type="checkbox" id="checkbox" v-model="receiveMsg"><label class="label" for="checkbox">接受更新邮件</label>
            </div>
            <button class="btn" @click="createAccount">创建账号</button>
        </div>
    </div>

<script>
    const App = {
        data() {
            return {
                fields: [
                    {
                        title: "用户名",
                        required: true,
                        type: "text",
                        model: ""
                    },
                    {
                        title: "邮箱",
                        required: false,
                        type: "text",
                        model: ""
                    },
                    {
                        title: "密码",
                        required: true,
                        type: "password",
                        model: ""
                    },
                ],
                receiveMsg: false,
                payload: ""
            }
        },
        computed: {
            fieldsLength() {
                return this.fields.length;
            },
            username: {
                get() {
                    return this.fields[0].model
                },
                set(value) {
                    this.fields[0].model = value
                }
            },
            email: {
                get() {
                    return this.fields[1].model
                },
                set(value) {
                    this.fields[1].model = value
                }
            },
            password: {
                get() {
                    return this.fields[2].model
                },
                set(value) {
                    this.fields[2].model = value
                }
            }
        },
        methods: {
            createAccount() {
                if (this.username.length === 0) {
                    alert("用户名为空")
                    return
                }
                if (this.password.length <= 6) {
                    alert("密码不正确")
                    return
                }
                this.payload = {
                    username: this.username,
                    email: this.email,
                    password: this.password,
                    receiveMsg: this.receiveMsg
                }
                alert("注册成功")
                console.log(this.payload)
            }
        }
    }
    Vue.createApp(App).mount("#application")
</script>
</body>
</html>